<template>
  <div>
    <el-dialog
            v-model="visable"
            class="exportModalBox"
            :title="title"
            width="40%"
            draggable
            :close-on-click-modal="false"
        >
            <el-form ref="formRef" :model="formData" label-width="auto" :rules="formRules" style="width: 90%;margin: auto;">
              <el-col :span="24">
                  <el-form-item label="sql类型" prop="type">
                    <el-select v-model="formData.type" placeholder="sql类型:" clearable @change="sqlTypeChange">
                      <el-option label="查询" :value="1">
                          <span style="float: left">查询</span>
                          <span style="float: right;color: var(--el-text-color-secondary);">select</span>
                      </el-option>
                      <el-option label="更新" :value="2">
                          <span style="float: left">更新</span>
                          <span style="float: right;color: var(--el-text-color-secondary);">update</span>
                      </el-option>
                      <el-option label="插入" :value="3">
                          <span style="float: left">插入</span>
                          <span style="float: right;color: var(--el-text-color-secondary);">insert into</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="sql编号:" prop="code">
                        <el-input
                            v-model="formData.code"
                            placeholder="sql编号"
                            class="demoWidth"
                            clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="sql文本:" prop="sqlText">
                        <el-input
                            v-model="formData.sqlText"
                            placeholder="sql文本"
                            class="demoWidth"
                            clearable
                            :rows="3"
                            type="textarea"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="描述:" prop="descript">
                        <el-input
                            v-model="formData.descript"
                            placeholder="sql描述"
                            clearable
                            class="demoWidth"
                            :rows="2"
                            type="textarea"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                  <el-button size="small" @click="closeAddModal">取消</el-button>
                  <el-button type="primary" size="small" @click="submit">确定</el-button>
                  <el-button type="primary" size="small" @click="openRunModal">调试sql</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- sql试运行抽屉 -->
        <SqlRunWindowsVue ref="sqlRunRef" :sqlText="formData.sqlText"/>
  </div>
</template>
<script>
import {addSql, updateSql,getSqlById} from '@/api/system/sql'
import SqlRunWindowsVue from './sqlRunWindows.vue'
export default {
  components:{
    SqlRunWindowsVue
  },
  data(){
    return {
      // 弹框标题
      title:'',
      // 弹框开关
      visable:false,
      // 弹框中form数据对象
      formData :{
        id:'',
        code: '',
        descript: '',
        sqlText: '',
        type: null,
      },
      // 弹框中form校验规则
      formRules:{
        code: [{ required: true, trigger: 'blur', message: 'sql编号不能为空' }],
        sqlText: [{ required: true, trigger: 'blur', message: 'sql文本不能为空' }],
        type: [{ required: true, trigger: 'blur', message: 'sql类型不能为空' }],
      },
      
    }
  },
  methods: {
    openModal(row) {
      this.visable = true
      this.$nextTick(() => {
        this.$refs['formRef'].resetFields()
      })
      if(row.id){
        this.title = '修改自定义SQL'
        getSqlById(row).then(res=>{
          if (res.code==1) {
            this.formData = {...res.data}
          }
        })
      } else {
        this.title = '新增自定义SQL'
      }
    },
    // sql下拉框变更
    sqlTypeChange(type) {
      if (type==1) {
          this.formData.sqlText='select * from';
      } else if (type==2) {
          this.formData.sqlText='update ';
      } else if (type==3) {
          this.formData.sqlText='insert into ';
      }
    },
    
    // 保存提交
    submit(){
      this.$refs['formRef'].validate(async valid => {
        if (valid) {
            try {
              if(this.formData.id){
                // 修改
                await updateSql(this.formData).then(res=>{
                  if (res.code==1) {
                    this.$message.success('操作成功')
                    window.setTimeout(()=>{
                      this.$emit('flushTable',{})
                      this.visable = false
                    },300)
                  }
                })
              } else {
                // 新增
                await addSql(this.formData).then(res=>{
                  if (res.code==1) {
                    this.$message.success('操作成功')
                    window.setTimeout(()=>{
                      this.$emit('flushTable',{})
                      this.visable = false
                    },300)
                  }
                })
              }
              this.$message.success(msg);
            } catch (error) {

            }
        }
      });
    },
    // 关闭弹框
    closeAddModal(){
      this.visable = false
    },
    // 打开sql运行窗口
    openRunModal() {
      this.$refs.sqlRunRef.openRunModal(undefined)
    }

  }
}
</script>
<style>
.open {
  width:35vw !important;
}
.sqlParamTip{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
>>>.sqlLabel .el-form-item__label{
  padding-right: 0 !important;
}
.demoWidth textarea{
  background-color: unset !important;
  color: black !important;
}
.demoWidth textarea:hover{
  cursor: auto !important;
}
</style>